<template>
	<view class="body">
		 <view class="top">
			 <view class="back">
				 <image @click="cancle" src="../../static/approval/back.png" mode=""></image>
			 </view>
			 <view class="left">
				  <input type="text" value=""  v-model="value" @input="holetDataFn" placeholder="请输入婚车名称" placeholder-style="font-size:26upx;"/>
				  <image src="../../static/approval/look.png" mode=""></image>
			 </view>
			 <view class="right">搜索</view>
		 </view> 
		 <view class="shop_list1" v-if="customerList.length>=1">
		 	<scroll-view :scroll-y="true" class="shop_mian" >						
		 		<view  class="shop_title" @click="clickHolet(item)" v-for="(item,index) in customerList" :key="index">
		 		  {{item.title}}
		 		</view>						
		 	</scroll-view>					
		 </view>
		 <!-- 关联门店 -->
		<!-- <view class="con_box1" v-if="isShow">
			 <view class="title">
				 <text>关联酒店</text>
				 
			 </view>
			 <view class="con">
				 <text v-for="(item,index) in list" :key="index" @click="search(item.title)">{{item.title}}</text>
			 </view>
		 </view> -->
		 <!-- 历史搜索 -->
		 <view class="con_box1" v-if="!isHidden">
			 <view class="title">
				 <text>历史搜索</text>
				 <image src="../../static/approval/delete.png" mode="" @click="deleteHistory"></image>
			 </view>
			 <view class="box">
				 <text v-for="(item,index) in searchAll" :key="index" @click="search(item)">{{item}}</text>
			 </view>
		 </view>
	</view>
</template>

<script>
	import sun from '@/utils/sun.js'
	export default {
		data() {
			return {
				value:'',//输入框值
				id:'',//搜索来源id
				customerList:[],//婚车列表
				isShow:true,
				isHidden:false,
				list:[],
			    searchAll:[],//搜索数据
				type:'',//代表从哪里跳转进来
				url:'',//返回路径
				carList:[],
			}
		},
		onLoad(options) {
			this.type=options.type;
			this.carList=JSON.parse(options.carList);
			let that=this;
			//获取历史搜索内容
			uni.getStorage({
					key: 'allCar',
					success(res) {
						that.searchAll = res.data
						if(that.searchAll.length==0){
							that.isHidden=true;
						}
					},
					fail(e) {
						that.isHidden=true;
					}
				})
		},
		methods: {
			//选择酒店
			holetDataFn(e){
				this.value= e.detail.value;
				this.isShow=false;
				this.isHidden=true;
				if(this.value==''){
					this.customerList=[];
					this.isShow=true;
					this.isHidden=false;
				}else{
					this.hotelName({title:this.value});
				}

			},
			//客资
			hotelName(e){
			  let that=this;
			  that.customerList=[]; 
			  that.carList.forEach((item,index)=>{
				  if(item.title.includes(e.title)){
					  that.customerList.push(item);
				  }
			  })			  
			},
			//选中客资
			clickHolet(e){
			  this.value=e.title;
			  this.id=e.id;
			  this.customerList = [];
			  if(this.value){
					   var pages = getCurrentPages();
					    var currPage = pages[pages.length - 1];   //当前页面
					    var prevPage = pages[pages.length - 2];  //上一个页面 
					  //接调用上一个页面的setData()方法，把数据存到上一个页面中
					  //将是否收藏属性传递给上一个页面		  
					 // #ifdef H5
					 if(this.type=='car'){
						 prevPage._data.car.master_car_text=this.value;
						 prevPage._data.car.master_car_id=this.id;
					 }else if(this.type=="follow"){
						 prevPage._data.car.slave_car_text=this.value;
						 prevPage._data.car.slave_car_id=this.id;
					 }
					  
					   // #endif
					   
					  // #ifdef APP-PLUS
					  if(this.type=='car'){
						 uni.$emit('car',{
									  carFrom: this.value,
									  carID: this.id
									})
					  }else if(this.type=='follow'){
							 uni.$emit('followCar',{
							  followFrom: this.value,
							  followID: this.id
							})
					  }
					   
					   // #endif
					  uni.navigateBack({
					  	
					  })
				 this.searchFun(this.value);
			  }
			},
			//取消返回上一页
			cancle(){
				uni.navigateBack({

				})
			},
			search(item){
				this.value=item;
				if(this.value){
					this.isShow=false;
					this.isHidden=true;
				}else{
					this.isShow=true;
					this.isHidden=false;
				}
				this.hotelName({title:this.value})
			},
			searchFun(value) {
				 let that = this;
					if(value) {    // 输入框的值不为空时
					let i=that.searchAll.indexOf(value);
					if(i!==-1){
						that.searchAll.splice(i,1);
					}
					that.searchAll.unshift(value)    // 将输入框的值添加到搜索记录数组中存储
					uni.setStorage({
						key: 'allCar',
						data: that.searchAll,    
						success: function () {
						}
					})
				    }
			},
			//删除历史搜索
			deleteHistory(){
				let that=this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除所有历史记录吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.searchAll=[];
							that.isHidden=true;
							uni.setStorage({
								key: 'allCar',
								data: that.searchAll,    
								success: function () {
								}
							})
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			

		}
	}
</script>

<style lang="less">
	page{
		padding-top: 160upx;
	}
	.top{
		width: 100%;
		height: auto;
		padding:60upx 20upx 20upx 20upx;
		box-sizing: border-box;
		display: flex;
		position: fixed;
		left: 0;
		top:0;
		z-index: 100; 
		background: #FFFFFF;
		.back{
			width: 10%;
			height: auto;
			display: flex;
			align-items: center;
			image{
				width: 40upx;
				height: 40upx;
			}
		}
		.left{
			width: 75%;
			height: auto;
			position: relative;
			display: flex;
			align-items: center;
			input{
				width: 100%;
				height: 60upx;
				padding-left: 80upx;
				background: #F1F1F1;
				border-radius:31upx;
			    color:#333333;
				font-size: 28upx;
				font-family:PingFang SC;
			}
			image{
				width: 30upx;
				height: 30upx;
				position: absolute;
				left: 5%;
				z-index: 10;
			}
		}
		.right{
			width: 15%;
			height: 60upx;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.con_box1{
		width: 100%;
		height: auto;
		padding: 20upx 40upx 20upx 32upx;
		box-sizing:  border-box;
		.title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			text{
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(9,9,9,1);
			}
			image{
				width: 30upx;
				height: 30upx;
			}
		}
		.con{
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			text{
				width: auto;
				padding: 15upx 48upx;
				background:rgba(248,248,248,1);
				border-radius:30upx;
				display: block;
				font-size: 26upx;
				margin-top: 20upx;
				margin-right: 20upx;
			}
		}
		.box{
			width: 100%;
			max-height:250upx;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			text{
				width: auto;
				padding: 15upx 48upx;
				background:rgba(248,248,248,1);
				border-radius:30upx;
				display: block;
				font-size: 26upx;
				margin-top: 20upx;
				margin-right: 20upx;
			}
			
		}
	}
	//门店列表弹框
	.shop_list1{
		width: 100%;
		height: auto;	
		padding: 20upx;
		position: absolute;
		left: 0;
		top: 10%;
		z-index: 11;
		box-sizing: border-box;
		.shop_mian{
			max-height: 100%;
			width: 100%;
			font-size: 28upx;
			color:#818181;	
			.shop_title{
				padding: 20upx 0;
				border-bottom: 1upx solid #F0F0F0;
				box-sizing: border-box;
			}
		}
	}
</style>
